<template>
  <up-overlay :show="show">
    <view class="vip-box" :class="type === 1 && 'success-box'">
      <image class="vip-img" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250603/img_${type === 1 ? 'success' : 'fail'}.png`" />

      <view class="vip-title" :class="type === 1 && 'success-title'">
        {{ type === 0 ? 'VIP未开通' : type === 1 ? 'VIP领取成功' : type === 2 ? 'VIP已过期' : [3, 4].includes(type) ? 'VIP领取失败' : type === 7 ? 'VIP未生效' : 'VIP功能已暂停' }}
      </view>

      <view v-if="[0, 1, 2, 7].includes(type)" class="vip-content">
        <view v-if="type === 1" class="content-top">
          —— 立享价值￥
          <text class="price">
            {{ price }}
          </text>
          /月 VIP权益 ——
        </view>
        <view v-else class="content-top-2">
          <text class="top-info">
            {{ type === 0 ? '无法享受VIP权益，，赶快联系门店老师为您免费开通VIP吧!' : type === 2 ? '联系门店老师免费恢复VIP权益' : '您的VIP未生效，具体请联系门店老师了解' }}
          </text>
          <text class="top-desc">
            —— 以下功能暂不可用 ——
          </text>
        </view>

        <view class="content-bottom">
          <view class="content-item">
            <image class="item-img" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250603/icon_read_${type === 1 ? '1' : '2'}.png`" />
            <text class="item-text" :class="type === 1 ? 'item-text-active' : ''">
              阅读测验
            </text>
          </view>

          <view class="content-item">
            <image class="item-img" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250603/icon_mini_${type === 1 ? '1' : '2'}.png`" />
            <text class="item-text" :class="type === 1 ? 'item-text-active' : ''">
              微学堂课程
            </text>
          </view>

          <view class="content-item">
            <image class="item-img" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250603/icon_hosting_${type === 1 ? '1' : '2'}.png`" />
            <text class="item-text" :class="type === 1 ? 'item-text-active' : ''">
              托管日历
            </text>
          </view>

          <view class="content-item">
            <image class="item-img" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250603/icon_ws_${type === 1 ? '1' : '2'}.png`" />
            <text class="item-text" :class="type === 1 ? 'item-text-active' : ''">
              五商视频
            </text>
          </view>
        </view>
      </view>

      <view v-else-if="[3, 4].includes(type)" class="vip-text">
        {{ type === 3 ? '该账号VIP未生效，您无法享受VIP权益，赶快联系门店老师为您免费开通VIP吧！' : `您的VIP权益已于${date}到期，赶快联系门店老师免费恢复VIP权益吧！` }}
      </view>

      <view v-else class="vip-info">
        <view class="info-top">
          联系门店老师免费恢复VIP权益
        </view>
        <view class="info-bottom">
          {{ type === 5 ? '您的VIP会员已过期，无法继续记录阅读成长！' : '您的VIP会员已过期，无法继续观看五商课程视频！' }}
        </view>
      </view>

      <view class="content-btn">
        <view class="btn-item" @click="handleClose">
          {{ type === 1 ? '立即体验' : '我知道了' }}
        </view>
      </view>
    </view>
    <image class="bg-close" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/model_close.png" @click="handleClose" />
  </up-overlay>
</template>

<script lang="ts" setup>
defineOptions({
  options: {
    styleIsolation: 'shared',
  },
});

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  type: {
    type: Number,
    default: 1, // 0-未开通 1-领取成功 2-登录vip过期 7-VIP未生效 3-领取失败未生效 4-领取失败已过期 5-阅读已过期 6-五商已过期
  },
  date: {
    type: String,
    default: '',
  },
  price: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['update:show', 'close']);

const handleClose = () => {
  emit('update:show', false);
  if ([1, 2, 3, 7].includes(props.type)) {
    emit('close');
  }
};
</script>

<style lang="scss" scoped>
.vip-box {
  position: relative;
  width: 628rpx;
  padding: 46rpx 48rpx;
  background: #fff;
  border-radius: 38rpx;

  .vip-img {
    position: absolute;
    left: 120rpx;
    top: -154rpx;
    width: 420rpx;
    height: 316rpx;
  }

  .vip-title {
    padding-top: 85rpx;
    font-size: 50rpx;
    font-weight: bold;
    line-height: 90rpx;
    color: #302D2A;
    text-align: center;
  }
  .success-title {
    color: #482218;
  }

  .vip-content {
    padding: 12rpx 0 70rpx 0;

    .content-top {
      padidng-top: 18rpx;
      padding-bottom: 43rpx;
      position: relative;
      font-size: 23rpx;
      color: #482218;
      line-height: 50rpx;
      text-align: center;

      .price {
        font-size: 50rpx;
        font-weight: bold;
        color: #482218;
      }
    }

    .content-top-2 {
      display: flex;
      flex-direction: column;
      align-items: center;

      .top-info {
        font-size: 31rpx;
        color: #302D2A;
        line-height: 38rpx;
        text-align: center;
      }

      .top-desc {
        padding-top: 54rpx;
        padding-bottom: 24rpx;
        font-size: 25rpx;
        color: #7D7D7D;
        line-height: 50rpx;
      }
    }

    .content-bottom {
      display: flex;
      justify-content: space-between;

      .content-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .item-img {
          width: 80rpx;
          height: 80rpx;
        }

        .item-text {
          padding-top: 10rpx;
          font-size: 23rpx;
          color: #7A7A7A;
          line-height: 38rpx;
        }

        .item-text-active {
          color: #C07D26;
        }
      }
    }
  }

  .vip-text {
    padding: 37rpx 0 115rpx 0;
    font-size: 27rpx;
    color: #3D3D3D;
    line-height: 50rpx;
    text-align: center;
  }

  .vip-info {
    display: flex;
    flex-direction: column;
    align-items: center;

    .info-top {
      padding-top: 12rpx;
      font-size: 31rpx;
      color: #302D2A;
      line-height: 38rpx;
    }

    .info-bottom {
      padding-top: 54rpx;
      padding-bottom: 64rpx;
      font-size: 25rpx;
      color: #7D7D7D;
      line-height: 50rpx;
      white-space: nowrap;
    }
  }

  .content-btn {
    display: flex;

    .btn-item {
      flex: 1;
      background: #FF8B0E;
      color: #FFFFFF;
      text-align: center;
      font-weight: bold;
      font-size: 28rpx;
      line-height: 92rpx;
      border-radius: 46rpx;
    }
  }
}

.success-box {
  background: linear-gradient( 180deg, #E6BD83 3%, #FDFBF6 26%, #FFFFFF 99%);
}

.bg-close {
  margin-top: 64rpx;
  width: 80rpx;
  height: 80rpx;
}
</style>

<style lang="scss">
.u-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
